// file: ./next.config.ts

import type { NextConfig } from 'next';
import type { ArcoDesignPluginOptions } from '@arco-plugins/webpack-react';

import ArcoWebpackPlugin from '@arco-plugins/webpack-react';

// ArcoWebpackPlugin的配置项
// @link https://github.com/arco-design/arco-plugins/blob/main/packages/plugin-webpack-react/README.zh-CN.md
const ArcoOptions: Partial<ArcoDesignPluginOptions> = {
  include: ['app'],
  removeFontFace: true,
  style: 'css',
  modifyVars: {
    prefix: 'CustomPrefixName',
  },
};

// next.js的配置项
const nextConfig: NextConfig = {
  experimental: {
    serverActions: {
      bodySizeLimit: '5mb',
    },
  },

  /* config options here */
  // // @link https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages
  transpilePackages: ['@arco-design/web-react'],
  // 由webpack来配置载入@arco-plugins/webpack-react扩展
  // @link https://nextjs.org/docs/app/api-reference/next-config-js/webpack
  webpack: (config) => {
    // config.module.rules.push({
    //     test: /\.css$/,
    //     use: [{ loader: 'css-loader' }],
    // });
    // config.module.rules.push({
    //     test: /\.less$/,
    //     use: [
    //         { loader: 'style-loader' },
    //         { loader: 'css-loader' },
    //         // 下面两个顺序要注意
    //         { loader: 'postcss-loader' },
    //         {
    //             loader: 'less-loader',
    //             options: { lessOptions: { modifyVars: {} } },
    //         },
    //     ],
    // });
    config.plugins.push(new ArcoWebpackPlugin(ArcoOptions));
    return config;
  },
};

export default nextConfig;
